<template>
  <div class="friend_list">
    <HeaderImg title="好友"></HeaderImg>

    <div class="firend-list-act">
      <div class="mui-table-view-cell">
        <a class="mui-navigate-right" @click="goFriendPush">新好友</a>
      </div>
      <div class="mui-table-view-cell">
        <a class="mui-navigate-right" @click="goGroupAdmin">管理分组</a>
      </div>
    </div>

    <div id="friend-group">
      <div style="padding: 10px 10px;">
        <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
          <a class="mui-control-item mui-active" to-item="#group-friend-panel">好友分组</a>
          <a class="mui-control-item" to-item="#group-chat-panel">群聊列表</a>
        </div>
      </div>
      <div>
        <!-- Friend Group Start -->
        <div id="group-friend-panel" mod="group-list-item" class="mui-control-content mui-active">
          <ul class="mui-table-view" id="group-friend-ul">
            <!-- Vue Traverse Friend Group-->
            <li v-for="(groupItem,groupKey) in friendGroupList" class="mui-table-view-cell mui-collapse">
              <a class="mui-navigate-right">{{ groupItem.friend_group_name }}</a>
              <span class="group-friend-num">{{ groupItem.num }}/{{ groupItem.num }}</span>
              <div class="mui-collapse-content">
                <ul   class="mui-table-view group-list-friend">
                  <!-- Vue Traverse Friend -->
                  <li v-for="firendItem in groupItem.friends"  class="mui-table-view-cell mui-media">
                    <a href="javascript:;" :friend-id="firendItem.friend_target" :title="firendItem.friend_target" @click="toFriendData(firendItem.friend_target)">
                      <img class="mui-media-object mui-pull-left" :src="firendItem.user_header" />
                      <div class="mui-media-body">
                        {{ firendItem.friend_alias }}
                        <p class="mui-ellipsis">{{ firendItem.user_info }}</p>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

          </ul>
        </div>
        <!-- Group Chat List Start -->
        <div id="group-chat-panel" mod="group-list-item" class="mui-control-content">
          <ul class="mui-table-view" id="group-chat-list"></ul>
        </div>
      </div>
    </div>
     <footerNav active="1"></footerNav>
  </div>
</template>
<script>
import $ from "jquery";
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
import axios from 'axios';
import { api } from '../assets/js/api';
import { Toast } from "vant";
Vue.use(Tabbar).use(TabbarItem);
// import footerNav from "../../src/components/common/FooterNav";
// import HeaderImg from "../../src/components/common/HeaderImg";
export default {
  // components: {
  //   footerNav,
  //   HeaderImg
  // },
  data() {
    return {
      active: 1,
      friendGroupList : []
    };
  },
  methods: {
    goGroupAdmin : function(){
      this.$router.push({
        path : '/GroupAdmin',
      });
    },
    goFriendPush : function(){
      this.$router.push({
        path : '/FriendPush',
      });
    },
    toFriendData : function(friendId){
      this.$router.push({
        path : '/FriendCard',
        query : {
          friend_id : friendId
        }
      });
    }
  },
  created() {
    axios({
      url : api.friend.getGroupAndFriend,
      method : 'post'
    }).then((res) => {
        res = res.data;
        if(res.code){
          this.friendGroupList = res.data;
        }else{
          Toast(res.msg);
        }
    });

    $(function() {
      $("#group-friend-panel").on("click", "a.mui-navigate-right", function() {
        $(this)
          .parent()
          .toggleClass("mui-active");
      });
      $("a[to-item]").click(function() {
        if ($("a.mui-active[to-item]").attr("class") == $(this).attr("class"))
          return false;
        $("a.mui-control-item[to-item]").toggleClass("mui-active");
        $("[mod='group-list-item']").toggleClass("mui-active");
      });
    });
  }
};
</script>

<style>
.firend-list-act{
  background: #ffffff;
  margin-top: 12px;
}
</style>
